<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        * {
            color: cadetblue;
        }
        /* 元素选择器 */
        div {
            color: red;
        }

        p {
            color: #1330f0;
        }

        span {
            /* rgb形式 */
            color: rgb(61, 118, 144);
        }

        /* id 选择器 id+id属性的值 */
        #one {
            color: aquamarine;
        }

        #two {
            /* px 像素  em  rem */
            /* 默认字体大小是16px */
            font-size: 2rem;
        }

        /* 类选择器 class选择器 .+class属性的值 */
        /* .three {
            color: grey;
        } */

        /* 后代选择器 空格分开 */
        /* div a {
            color: blueviolet;
        } */
        /* 子选择器 >连接 前面的直接子类 */
        div>a {
            color: red;
        }

        div>p>a {
            color: black;
        }

        /* p 标签同级的下一个div选中 */
        p+div {
            color: bisque;
        }

        /* div标签同级的下一个p选中 */
        div+p {
            color: brown;
        }

        /*属性选择器 标签具有属性（属性给定的值）就会被选择*/
        input[type='text']{
            color: red;
        }
        input[type='password']{
            color: blue;
        }
        input[type='email']{
            color: purple;
        }
        /* 所有input含有type属性的都会被选中 */
        input[type] {}
        /* p标签写了class属性都会被选中 */
        p[class]{
            color: blue;
        }
        .item1, .item {
            background-color: blue;
        }
        
    </style>
</head>

<body>
    <p>开发喵</p>
    <div>国庆节结束了，要上班了。</div>
    <p>明天休息。</p>
    <span>但是还是要看书。</span>
    <p id="one">白日依山尽</p>
    <p id="two">黄河入海流</p>
    <p class="three">欲穷千里目</p>
    <p class="three">更上一层楼</p>
    <div>
        <a href="">第一个超链接</a><br />
        <p><a href="">第二个超链接</a></p>
        <p><a href="">第三个超链接</a></p>
    </div>
    <!-- div{
        color:red;
    } -->
    <div>第一个div</div>
    <p>第二个div</p>
    用户名：<input type="text" name="username"><br />
    密码: <input type="password" name="password" id=""><br />
    邮箱：<input type="email" name="email" id=""><br />

    <div class="item1">JDBC</div>
    <div class="item1">MYSQL</div>
    <div class="item1">HTML</div>
    <div class="item">CSS</div>

</body>

</html>